<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript" src="vue.js"></script>
</head>
<!--1.el两种写法 （1）new vue时配置的el  （2）先创建vue实例，随后通过vm.$mount('#id')指定-->
<!--2.data有两种写法  (1)对象式  （2）函数式   用组件时，data必须用函数式，否则报错-->
<!--3.由vue管理的函数，不要写箭头函数，一旦写了箭头函数，this不再指向vue实例-->

<body>
<div id="root">
  <h1>hello,{{name}}</h1>
</div>
</body>
<script type="text/javascript" >
  Vue.config.productionTip = false
 var x = new Vue({
    el:'#root',
     //data的对象式写法
    // data:{
    //   name:"STUDENT"
    // }
     //data的第二种写法：函数式
    data:function (){
        return {
            name:"STUDENT"
        }
    }
  })
  console.log(x)
  // setTimeout(()=>{x.$mount('#root')},3000)//x.$mount() el的第二种写法,更加灵活

</script>
</html>